<template>
  <div class="category">
    <!-- 分类 -->
    <van-nav-bar title="全部分类" fixed />

    <!-- 搜索框 -->
    <van-search shape="round" background="#f1f1f2" placeholder="请输入搜索关键词" @click-input="router.push('/pages/search/index')" />

    <!-- 分类列表 -->
    <div class="list-box">
      <div class="left">
        <ul>
          <li v-for="(item, index) in list" :key="item.category_id">
            <a :class="{ active: index === activeIndex }" @click="activeIndex = index" href="javascript:;">{{ item.name
            }}</a>
          </li>
        </ul>
      </div>
      <div class="right">
        <div @click="router.push(`/pages/search/list?categoryId=${item.category_id}`)"
          v-for="item in list[activeIndex]?.children" :key="item.category_id" class="cate-goods">
          <img :src="item.image?.external_url" alt="">
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getCategoryData } from '@/api/category'
  import router from '@/utils/router'
  export default {
    name: 'CategoryPage',
    created() {
      this.getCategoryList()
    },
    data() {
      return {
        list: [],
        activeIndex: 0,
        router
      }
    },
    methods: {
      async getCategoryList() {
        const { data: { list } } = await getCategoryData()
        this.list = list
      }
    }
  }
</script>

<style lang="less" scoped>

  // 主题 padding
  .category {
    padding-top: 54px;
    padding-bottom: 50px;
    height: 100vh;

    .list-box {
      height: 100%;
      display: flex;

      .left {
        width: 85px;
        height: 100%;
        background-color: #f3f3f3;
        overflow: auto;

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }

        li {
          display: list-item;
          text-align: -webkit-match-parent;
          unicode-bidi: isolate;
        }


        a {
          display: block;
          height: 45px;
          line-height: 45px;
          text-align: center;
          color: #444444;
          font-size: 12px;
          text-decoration: none;

          &.active {
            color: #fb442f;
            background-color: #fff;
          }
        }
      }

      .right {
        flex: 1;
        height: 100%;
        background-color: #ffffff;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        padding: 10px 0;
        overflow: auto;

        .cate-goods {
          width: 33.3%;
          margin-bottom: 10px;

          img {
            width: 70px;
            height: 70px;
            display: block;
            margin: 5px auto;
          }

          p {
            text-align: center;
            font-size: 12px;
          }
        }
      }
    }
  }

  // 导航条样式定制
  // .van-nav-bar {
  //   z-index: 999;
  // }

  // 搜索框样式定制
  .press-search-index {
    position: fixed;
    width: 100%;
    top: var(--status-bar-height);
    z-index: 999;
  }
</style>
